import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import style from './index.module.scss'

class Com extends Component {
  render() {
    return (
      <div className='box'>
          <div className="content">
              {/* 导航栏 */}
            <NavBar
            mode="light"
            style={{color: '#3CD578'}}
            icon={<Icon type="left" />}
            onLeftClick={() => console.log('onLeftClick')}
            rightContent={[
                '我的订阅',
            ]}
            >作家专栏</NavBar>
            {/* 导航栏 */}

            {/* 分享 */}
            <div className={style.fenxiang}>
                {/* <img src="/images/zhuan/分享\ 用创造定义旅行.png" alt=""/> */}
            </div>
            {/* 分享 */}

            {/* 才能作家 */}
            <div className={style.chengzuojia}>
                <div className={style.chengwen}>如何成为专栏作家</div>
            </div>
            {/* 才能作家 */}
            <div className={style.tuijianzhuanlan}>
                推荐专栏
            </div>

            <div className={style.zuojialiebiao}>
                <div className={style.no1}>
                    <img src="/images/zhuan/touxiang1.png" alt=""/>
                    <b>小兔子爱旅行</b>
                    <span>不煲鸡汤，不写八卦只用文字和影像分享</span>
                    <div className={style.jin}>进入专栏</div>
                </div>
                <div className={style.no1}>
                    <img src="/images/zhuan/touxiang1.png" alt=""/>
                    <b>小兔子爱旅行</b>
                    <span>不煲鸡汤，不写八卦只用文字和影像分享</span>
                    <div className={style.jin}>进入专栏</div>
                </div>
                <div className={style.no1}>
                    <img src="/images/zhuan/touxiang1.png" alt=""/>
                    <b>小兔子爱旅行</b>
                    <span>不煲鸡汤，不写八卦只用文字和影像分享</span>
                    <div className={style.jin}>进入专栏</div>
                </div>
                <div className={style.no1}>
                    <img src="/images/zhuan/touxiang1.png" alt=""/>
                    <b>小兔子爱旅行</b>
                    <span>不煲鸡汤，不写八卦只用文字和影像分享</span>
                    <div className={style.jin}>进入专栏</div>
                </div>
                <div className={style.geng}>查看更多></div>
            </div>
          </div>
      </div>
    );
  }
}

export default Com